<template>
  <div class="box">
    <n-space vertical>
      <div class="content">
        <div class="innerblock"></div>
        <n-form :rules="rules" :model="formvalue" ref="formRef">
          <n-form-item path="uName">
            <n-input
              v-model:value="formvalue.uName"
              type="text"
              placeholder="用户名"
            >
              <template #prefix>
                <n-icon :component="PersonOutline" />
              </template>
            </n-input>
          </n-form-item>
          <n-form-item path="uPwd">
            <n-input
              type="password"
              v-model:value="formvalue.uPwd"
              placeholder="密码"
              show-password-on="click"
            >
              <template #prefix>
                <n-icon :component="LockClosedOutline" />
              </template>
              <template #password-visible-icon>
                <n-icon :component="EyeOutline" />
              </template>
              <template #password-disable-icon>
                <n-icon :component="EyeOffOutline" />
              </template>
            </n-input>
          </n-form-item>
          <n-button
            @click="userLogin"
            type="success"
            :loading="loading"
            style="width: 100%; margin-top: 40px"
          >
            登录
          </n-button>
        </n-form>
      </div>
    </n-space>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import {
  PersonOutline,
  LockClosedOutline,
  EyeOutline,
  EyeOffOutline,
} from "@vicons/ionicons5";
import { useRouter } from "vue-router";
import { useMessage } from "naive-ui";
import { login } from "@/api/login";
import { GetRolesInfo } from "@/api/rolse";
import { GetOfficeInfo } from "@/api/office";
import { useUserStore } from "@/store/user";
interface IForm {
  uName: string;
  uPwd: string;
}
const router = useRouter();
const store = useUserStore();
const message = useMessage();
const uPower: any = ref("");
let formRef = ref(null);
let loading = ref(false);
const dId = reactive({
  dId: 0,
});
const rId = reactive({
  rId: 0,
});
const formvalue: IForm = reactive({
  uName: "admins",
  uPwd: "123456",
});
let rules = {
  uName: {
    required: true,
    message: "请输入用户名",
    trigger: ["input", "blur"],
  },
  uPwd: {
    required: true,
    message: "请输入密码",
    trigger: ["input", "blur"],
  },
};
const userLogin = () => {
  login(formvalue).then((res) => {
    dId.dId = res.data.dId;
    rId.rId = res.data.rId;
    uPower.value = res.data.uPower;
    if (res.data != "errors" && res.data != 2) {
      GetRolesInfo(rId).then((resb) => {
        uPower.value = `${resb.data.rPower},${uPower.value}`.split(",");
        let uPower2 = [...new Set(uPower.value)].join(","); //数组去重,后重组为字符串
        window.localStorage.setItem("uPower", uPower2);
      });
      GetOfficeInfo(dId).then((res) => {
        window.localStorage.setItem("dName", res.data.dName);
      });
      window.localStorage.setItem("dId", res.data.dId);
      window.localStorage.setItem("uName", res.data.uName);
      window.localStorage.setItem("uPwd", res.data.uPwd);
      window.localStorage.setItem("token", res.data.token);
      window.localStorage.setItem("uId", res.data.uId);
      store.$state.userinfo = res.data;
      message.info("登录成功");
      setTimeout(() => {
        router.push("MeetingRoomManagement");
      }, 2000);
    } else {
      message.error("请输入正确的账号密码");
      (formvalue.uName = ""), (formvalue.uPwd = "");
    }
  });
};
</script>

<style scoped lang="scss">
.box {
  background-image: url("@/assets/BD.jpeg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  height: 100%;
  width: 100%;
  margin-bottom: 0;
}

.innerblock {
  height: 25px;
}

.content {
  height: 100vh;
  width: 30vw;
  margin: 5px auto;
  margin-top: 100px;
  .header > img {
    margin: 5px auto;
  }
}
</style>
